<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body>

	 <link th:href="@{/asserts/ajax/libs/staps/jquery.steps.css}" rel="stylesheet"/>
	 <style type="text/css">
		label.error{
			top:0px !important ;
		} 
		.wizard > .steps > ul > li {
			width: 33%;
		}
		.wizard > .content {
			background: #fafafa ;
		}
		.wizard-big.wizard > .content{
			min-height:400px !important ;	
		}
	 </style>

	<div class="ibox-content">
		<p>根据正面的指引完成项目创建</p>

		 <form id="form" class="wizard-big">
			<h1> <i class="fas fa-paper-plane"></i> 项目信息</h1>
			<fieldset>
				<div class="row">
					<div class="col-sm-12">
					
						<div class="form-group row">
							<label class="col-md-2 col-form-label control-label" for="text-input">
								名称
							</label>
							<div class="col-md-12">
								<input class="form-control" id="applicationName" type="text" name="applicationName" placeholder="应用名称，如：职工管理系统" >
							</div>
						</div>
						<div class="form-group row">
							<label class="col-md-2 col-form-label control-label" for="email-input">描述</label>
							<div class="col-md-12">
								<input class="form-control" id="applicationDesc" type="text" name="applicationDesc" placeholder="应用描述，如：管理公司职工信息" >
							</div>
						</div>
						<div class="form-group row">
							<label class="col-md-2 col-form-label control-label" for="email-input">图标</label>
							<div class="col-md-12">
								<input class="form-control" type="text" id="applicationIcons" name="applicationIcons" onclick="showIcons()" style="cursor:pointer" placeholder="点击选择项目图标" readonly="readonly" />
								<span class="help-block m-b-none danger"><i class="fa fa-info-circle"></i> 需要选择一个应用图标</span>
								<span class="form-control select-icons" id="applicationIconsLabel" style="background: none;border: 0px;" onclick="showIcons()"></span>
							</div>
						</div>
					</div>
				</div>

			</fieldset>
			<h1> <i class="fas fa-database"></i> 连接数据库</h1>
			<fieldset>
				<div class="form-group row">
					<label class="col-md-2 col-form-label control-label" for="email-input">工程名</label>
					<div class="col-md-12">
						<input class="form-control" type="hidden" value="com.alinesno.cloud" id="packageName" name="packageName" placeholder="包名" >
						<input class="form-control" id="feignServerPath" type="text" name="feignServerPath" placeholder="如: alinesno-cloud-base-boot" >
						<span class="help-block m-b-none danger"><i class="fa fa-info-circle"></i> 工程名就是idea(eclipse)中显示的项目名称，对应maven[artifactId]</span>
					</div>
				</div>
				
				<div class="form-group row">
					<label class="col-md-2 col-form-label control-label" for="email-input">数据库连接</label>
					<div class="col-md-12">
						<input class="form-control" id="dbUrl" type="text" 
							placeholder="例如:jdbc:mysql://localhost:3306/alinesno_cloud_base_storage"
							name="dbUrl" >
						<span class="help-block m-b-none danger"><i class="fa fa-info-circle"></i> 确保你的数据库可以公网访问或者平台可访问</span>
					</div>
				</div>

				<div class="form-group row">
					<label class="col-md-2 col-form-label control-label" for="email-input">数据库账号</label>
					<div class="col-md-12">
						<input type="text" class="form-control" id="dbUser" name="dbUser" placeholder="数据库用户" >
						<!-- 
						<div class="row">
							<div class="col-md-5">
							</div>
							<div class="col-md-5">
								<input type="password" class="form-control" id="dbPwd" name="dbPwd" placeholder="数据库密码" >
							</div>
						</div>
						 -->
					</div>
				</div>
				<div class="form-group row">
					<label class="col-md-2 col-form-label control-label" for="email-input">数据库密码</label>
					<div class="col-md-10">
						<input type="password" class="form-control" id="dbPwd" name="dbPwd" placeholder="数据库密码" >
					</div>
					<div class="col-md-2">
						<button type="button" class="btn  btn-primary" onclick="checkDatabaseUseable(this)">
							<i class="fas fa-exclamation-triangle"></i>   数据库校验
						</button>
					</div>
				</div>

				<!-- 
				<div class="form-group row">
					<label class="col-md-2 col-form-label control-label" for="email-input">作者名称</label>
					<div class="col-md-12">
						<input class="form-control" id="authorName" type="text" name="authorName" placeholder="作者名称" >
					</div>
				</div>
				 -->

			</fieldset>

			<h1> <i class="fab fa-docker"></i> 持续集成</h1>
			<fieldset>
				<div class="form-group row">
					<label class="col-md-2 col-form-label control-label" for="email-input">git仓库地址</label>
					<div class="col-md-12">
						<input class="form-control" id="gitRepositoryUrl" type="text" placeholder="https://gitee.com/xxx/xxx" name="gitRepositoryUrl" >
						<span class="help-block m-b-none danger"><i class="fa fa-info-circle"></i> 确保你的数据库可以公网访问或者平台可访问</span>
					</div>
				</div>
				<div class="form-group row">
					<label class="col-md-2 col-form-label control-label" for="email-input">git账号</label>
					<div class="col-md-12">
						<input type="text" class="form-control" id="gitUserName" name="gitUserName" placeholder="git用户名">
						<!-- 
						<div class="row">
							<div class="col-md-5">
								<input type="text" class="form-control" id="gitUserName" name="gitUserName" placeholder="git用户名">
							</div>
							<div class="col-md-5">
								<input type="password" class="form-control" id="gitPassword" name="gitPassword" placeholder="git密码">
							</div>
						</div>
						 -->
					</div>
				</div>
				<div class="form-group row">
					<label class="col-md-2 col-form-label control-label" for="email-input">git账号</label>
					<div class="col-md-10">
						<input type="password" class="form-control" id="gitPassword" name="gitPassword" placeholder="git密码">
						<!-- 
						<div class="row">
							<div class="col-md-5">
								<input type="text" class="form-control" id="gitUserName" name="gitUserName" placeholder="git用户名">
							</div>
							<div class="col-md-5">
								<input type="password" class="form-control" id="gitPassword" name="gitPassword" placeholder="git密码">
							</div>
						</div>
						 -->
					</div>
					<div class="col-md-2">
						<button type="button" class="btn  btn-primary" onclick="checkGitRepositoryUseable(this)">
							<i class="fas fa-exclamation-triangle"></i>   仓库校验
						</button>
					</div>
				</div>
				
				<div class="form-group row">
					<label class="col-md-2 col-form-label control-label" for="email-input">应用类型</label>
					<div class="col-md-12">
						<div class="checkbox">
							<label> 
								<input type="checkbox" name="serviceProject" readonly="readonly" onclick="return false"> 服务化 
								<span style="color:gray;margin-left:10px;"> (生成分布式服务工程代码)</span>
							</label>
						</div>
						<div class="checkbox">
							<label> 
								<input type="checkbox" name="dockerProject" checked="checked" readonly="readonly" onclick="return false"> 配置容器 
								<span style="color:gray;margin-left:10px;"> (此功能将生成容器地址并返回)</span>
							</label>
						</div>
					</div>
				</div>
				
			</fieldset>
			
		</form>
			
	</div>

	<footer th:replace="dashboard/footer :: footer"></footer>
    <script th:src="@{/asserts/ajax/libs/staps/jquery.steps.min.js}"></script>
    <script type="text/javascript" th:src="@{/resources/js/project.js}"></script>

	<script type="text/javascript">
		var databaseCheckFlag = false ; 
		var gitCheckFlag = false ; 
		
	    $(document).ready(function () {
	    	
	    	var icon = "<i class='fa fa-times-circle'></i> ";
	    	
	        $("#form").steps({
	        	transitionEffect: "slideLeft",
	            stepsOrientation: "vertical" ,
	            bodyTag: "fieldset", onStepChanging: function (event, currentIndex, newIndex) {
	                if (currentIndex > newIndex) {
	                    return true
	                }
	                if (newIndex === 3) {
	                    return false
	                }
	                var form = $(this);
	                if (currentIndex < newIndex) {
	                    $(".body:eq(" + newIndex + ") label.error", form).remove();
	                    $(".body:eq(" + newIndex + ") .error", form).removeClass("error")
	                }
	                form.validate().settings.ignore = ":disabled,:hidden";
	                
	                if(currentIndex == 1){ 
	                	if(!databaseCheckFlag){
	                		$.modal.msgWarning("请先校验数据库是否可用");
	                		return false ; 
	                	}
	                }
	                
	                return form.valid()
	            }, onStepChanged: function (event, currentIndex, priorIndex) {
	                if (currentIndex === 2 && priorIndex == 1) {
	                    $(this).steps("next")
	                }
	                if (currentIndex === 2 && priorIndex === 3) {
	                    $(this).steps("previous")
	                }
	            }, onFinishing: function (event, currentIndex) {
	                var form = $(this);
	                form.validate().settings.ignore = ":disabled";
	                
					if(!gitCheckFlag){
						$.modal.msgWarning("请先校Git仓库是否可用");
						return false ; 
					}
	                	
	                return form.valid()
	            }, onFinished: function (event, currentIndex) {
	                var form = $(this);
	                $.operate.save(ctx + "portal/ucenter/project/buildSave",$('#form').serialize());
	            }
	        }).validate({
	        	focusInvalid: true,	
	        	errorPlacement: function errorPlacement(error, element) { 
					error.appendTo(element.parent().parent());
	        	},
	            ignore: [],  
 				rules: {
 					applicationName: "required",
 					applicationDesc: "required",
 					applicationIcons: "required" , 
 					dbUrl: "required"  , 
 					dbUser: "required" , 
 					dbPwd : {required:true , }  , 
 					feignServerPath: "required"  , 
 					gitRepositoryUrl: {required:true} ,
 					gitUserName: "required"  , 
 					gitPassword: {required:true }   
 				} , 
 				messages: {
 					"gitRepositoryUrl": {
 			            remote: "仓库地址已存在."
 			        } 
 			    },
	        })
	    });
	   
	    // 验证数据库唯一性
	    function checkDatabaseUseable(btn){
	        var r = $('#form').valid() ; 
	        if(r){
				var config = {
        	        url: ctx + "portal/ucenter/project/checkDatabaseUseable",
        	        type: "post",
        	        dataType: "json",
        	        data: $('#form').serialize(),
        	        beforeSend: function () {
        	        	$.modal.loading("数据库验证中...");
        	        	$.modal.disable();
        	        },
        	        success: function(result) {
        	        	$.modal.closeLoading();
        	        	if (result.code == web_status.SUCCESS) {
                            databaseCheckFlag = true ; 
                            $(btn).find("i").removeClass("fas fa-exclamation-triangle").addClass("far fa-thumbs-up") ; 
	                		$.modal.msgSuccess("校验通过");
                        }  else {
                        	databaseCheckFlag = false ; 
                            $.modal.alertError(result.message); 
                        }			
        	        }
        	    };
        	    $.ajax(config)
	        }
	    }
	    
	    // 验证数据库唯一性
	    function checkGitRepositoryUseable(btn){
	        var r = $('#form').valid() ; 
	        if(r){
				var config = {
        	        url: ctx + "portal/ucenter/project/checkGitrepositoryUseable",
        	        type: "post",
        	        dataType: "json",
        	        data: $('#form').serialize(),
        	        beforeSend: function () {
        	        	$.modal.loading("数据库验证中...");
        	        	$.modal.disable();
        	        },
        	        success: function(result) {
        	        	$.modal.closeLoading();
        	        	if (result.code == web_status.SUCCESS) {
        	        		gitCheckFlag = true ; 
                            $(btn).find("i").removeClass("fas fa-exclamation-triangle").addClass("far fa-thumbs-up") ; 
	                		$.modal.msgSuccess("校验通过");
                        }  else {
                        	gitCheckFlag = false ; 
                            $.modal.alertError(result.message); 
                        }			
        	        }
        	    };
        	    $.ajax(config)
	        }
	    }
	</script>
		

</body>
</html>
